<template>
  <div>
    <div class="table-operator">
      <ButtonGroup>
        <Button
          :disabled="value.menuId && value.menuId!=='0' && !value.hasChild && $auth('systemMenuEdit')?false:true"
          class="search-btn"
          type="primary"
          @click="handleModal()">
          <span>新增操作权限</span>
        </Button>
      </ButtonGroup>
    </div>
    <Alert type="info" show-icon>操作权限可控制UI视图显示，如果功能需请求服务器接口,还需绑定相关接口权限.否则请求服务器将提示:"权限不足,拒绝访问!"</Alert>
    <Table border :columns="columns" :data="data" :loading="loading">
      <template slot="status" slot-scope="{ row }">
        <Badge v-if="row.status===1" status="success"/>
        <Badge v-else="" status="error"/>
        <span>{{ row.actionName }}</span>
      </template>
      <template slot="action" slot-scope="{ row }">
        <Button
          size="small"
          type="text"
          :disabled="$auth('systemMenuEdit')?false:true"
          @click="handleModal(row)">编辑</Button>
        <Button
          size="small"
          type="text"
          :disabled="$auth('systemMenuEdit')?false:true"
          @click="handleModal(row,forms[1])">接口授权</Button>
        <Button
          size="small"
          type="text"
          :disabled="$auth('systemMenuEdit')?false:true"
          @click="handleRemove(row)">删除</Button>
      </template>
    </Table>
    <Modal
      v-model="modalVisible"
      :title="modalTitle"
      width="40"
      @on-cancel="handleReset">
      <div>
        <Form ref="form1" v-show="current=='form1'" :model="formItem" :rules="formItemRules" :label-width="100">
          <FormItem label="上级菜单">
            <Input disabled v-model="value.menuName"></Input>
          </FormItem>
          <FormItem label="编码" prop="actionCode">
            <Input v-model="formItem.actionCode" placeholder="请输入内容"></Input>
            <span>规则：菜单编码+自定义操作编码.默认操作编码：View、Edit</span>
          </FormItem>
          <FormItem label="名称" prop="actionName">
            <Input v-model="formItem.actionName" placeholder="请输入内容"></Input>
          </FormItem>
          <FormItem label="优先级">
            <InputNumber v-model="formItem.priority"></InputNumber>
          </FormItem>
          <FormItem label="状态">
            <RadioGroup v-model="formItem.status" type="button">
              <Radio label="0">禁用</Radio>
              <Radio label="1">正常</Radio>
            </RadioGroup>
          </FormItem>
          <FormItem label="描述">
            <Input v-model="formItem.actionDesc" type="textarea" placeholder="请输入内容"></Input>
          </FormItem>
        </Form>
        <Form ref="form2" v-show="current=='form2'" :model="formItem" :rules="formItemRules">
          <FormItem prop="authorities">
            <Transfer
              :data="selectApis"
              :list-style="{width: '45%',height: '680px'}"
              :titles="['选择授权接口', '已授权接口']"
              :render-format="transferRender"
              :target-keys="formItem.authorityIds"
              @on-change="handleTransferChange"
              filterable>
            </Transfer>
          </FormItem>
        </Form>
        <div class="drawer-footer">
          <Button type="default" @click="handleReset">取消</Button>&nbsp;
          <Button type="primary" @click="handleSubmit" :loading="saving">保存</Button>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script>

export default {
  name: 'MenuAction',
  props: {
    value: Object
  },
  data () {
    const validateEn = (rule, value, callback) => {
      const reg = /^[_a-zA-Z0-9]+$/
      if (value === '') {
        callback(new Error('功能编码不能为空'))
      } else if (value !== '' && !reg.test(value)) {
        callback(new Error('只允许字母、数字、下划线'))
      } else {
        callback()
      }
    }
    return {
      modalVisible: false,
      saving: false,
      loading: false,
      current: 'form1',
      forms: [
        'form1',
        'form2'
      ],
      modalTitle: '',
      confirmModal: false,
      selectApis: [],
      formItemRules: {
        actionCode: [
          { required: true, validator: validateEn, message: '功能编码不能为空', trigger: 'blur' }
        ],
        actionName: [
          { required: true, message: '功能名称不能为空', trigger: 'blur' }
        ]
      },
      formItem: {
        actionId: '',
        actionCode: '',
        actionName: '',
        authorityIds: [],
        status: 1,
        menuId: '',
        priority: 0,
        actionDesc: ''
      },
      columns: [
        {
          title: '编码',
          key: 'actionCode',
          width: 150
        },
        {
          title: '名称',
          slot: 'status'
        },
        {
          title: '操作',
          slot: 'action',
          fixed: 'right',
          width: 200
        }
      ],
      data: []
    }
  },
  methods: {
    handleModal (data, step) {
      if (data) {
        Object.assign(this.formItem, {
          actionId: data.actionId,
          actionCode: data.actionCode,
          actionName: data.actionName,
          status: data.status,
          menuId: data.menuId,
          priority: data.priority,
          actionDesc: data.actionDesc
        })
      }
      if (!step) {
        step = this.forms[0]
      }
      if (step === this.forms[0]) {
        this.modalTitle = data ? '编辑功能 - ' + this.value.menuName + ' > ' + data.actionName : '新增功能 - ' + this.value.menuName
        this.modalVisible = true
        this.formItem.actionCode = this.formItem.actionId ? this.formItem.actionCode : this.value.menuCode
      }
      if (step === this.forms[1]) {
        this.modalTitle = data ? '接口授权 - ' + this.value.menuName + ' > ' + data.actionName : '接口授权'
        this.handleLoadActionApi(this.formItem.actionId)
      }
      this.current = step
      this.formItem.status = this.formItem.status + ''
    },
    handleReset () {
      const newData = {
        actionId: '',
        actionCode: '',
        actionName: '',
        authorityIds: [],
        status: 1,
        priority: 0,
        actionDesc: ''
      }
      this.formItem = newData
      // 重置验证
      this.forms.map(form => {
        this.$refs[form].resetFields()
      })
      this.current = this.forms[0]
      this.modalVisible = false
      this.saving = false
    },
    handleSubmit () {
      if (this.current === this.forms[0]) {
        this.$refs[this.current].validate((valid) => {
          if (valid) {
            this.$http.post(this.$apis.action.save, this.formItem, this).then(res => {
              this.handleReset()
              this.handleSearch()
            })
          }
        })
      }
      if (this.current === this.forms[1]) {
        this.$refs[this.current].validate((valid) => {
          if (valid) {
            this.saving = true
            this.$http.post(this.$apis.authority.actionGrant, {
              actionId: this.formItem.actionId,
              authorityIds: this.formItem.authorityIds.join(',')
            }, this).then(res => {
              this.handleReset()
              this.handleSearch()
            }).finally(() => {
              this.saving = false
            })
          }
        })
      }
    },
    handleSearch () {
      if (!this.value || !this.value.menuId) {
        return
      }
      this.formItem.menuId = this.value.menuId
      this.$http.get(this.$apis.action.getActionsByMenu, {
        menuId: this.value.menuId
      }).then(res => {
        this.data = res.data
      })
    },
    handleRemove (data) {
      this.$http.delete(this.$apis.action.remove, {
        actionId: data.actionId
      }, this).then(res => {
        this.handleReset()
        this.handleSearch()
      })
    },
    handleLoadActionApi (actionId) {
      if (!actionId) {
        return
      }
      const that = this
      const p1 = this.$http.get(this.$apis.authority.api, {}, this)
      const p2 = this.$http.get(this.$apis.authority.action, { actionId: actionId }, this)
      Promise.all([p1, p2]).then(function (values) {
        const res1 = values[0]
        const res2 = values[1]
        if (res1.code === 0) {
          res1.data.map(item => {
            item.key = item.authorityId
            item.label = `${item.prefix.replace('/**', '')}${item.path} - ${item.apiName}`
            item.disabled = item.path === '/**'
          })
          that.selectApis = res1.data
        }
        if (res2.code === 0) {
          const result = []
          res2.data.map(item => {
            if (!result.includes(item.authorityId)) {
              result.push(item.authorityId)
            }
          })
          that.formItem.authorityIds = result
        }
        that.modalVisible = true
      })
    },
    transferRender (item) {
      return `<span  title="${item.label}">${item.label}</span>`
    },
    handleTransferChange (newTargetKeys, direction, moveKeys) {
      if (newTargetKeys.indexOf('1') != -1) {
        this.formItem.authorityIds = ['1']
      } else {
        this.formItem.authorityIds = newTargetKeys
      }
    }
  },
  watch: {
    value (val) {
      this.handleSearch()
    }
  },
  mounted: function () {
  }
}
</script>
